/*
 * 2023/3/15
 * 商品模块（3套题）
 */
<template>
    <div style="text-align:left;padding-bottom: 50px;">
        <!--分类-->
        <div>
            <h3>分类</h3>
            <el-row>
                <el-col :span="3" :offset="1">分类</el-col>
                <el-col :span="20">
                    <div>
                        <el-tag style="cursor:pointer;margin-right: 20px;" type="warning"
                            v-for="(item, index) in categoryData" :key="index"
                            @click="eventCategoryClick(item.id)">{{ item.name }}</el-tag>
                    </div>
                    <div style="margin-top:20px;">
                        <el-tag style="cursor:pointer;margin-right: 20px;" type="warning"
                            v-for="(item, index) in categoryChildrenData" :key="index"
                            @click="eventCategoryChildrenClick(item.id)">{{ item.name }}</el-tag>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--品牌-->
        <div>
            <h3>品牌</h3>
            <el-row>
                <el-col :span="3" :offset="1">品牌</el-col>
                <el-col :span="20">
                    <el-tag style="cursor:pointer;margin-right: 20px;" type="warning" v-for="(item, index) in brandData"
                        @click="eventBrandClick(item.id)" :key="index">{{ item.name }}</el-tag>

                </el-col>
            </el-row>
        </div>

        <!--价格-->
        <div>
            <h3>价格</h3>
            <el-row>
                <el-col :span="3" :offset="1">价格区间</el-col>
                <el-col :span="20">

                    <el-tag style="cursor:pointer;margin-right: 20px;" type="warning"
                        @click="eventPriceClick(0, 100)">0-100</el-tag>
                    <el-tag style="cursor:pointer;margin-right: 20px;" type="warning"
                        @click="eventPriceClick(100, 500)">100-500</el-tag>
                    <el-tag style="cursor:pointer;margin-right: 20px;" type="warning"
                        @click="eventPriceClick(500, 1000)">500-1000</el-tag>

                    <el-input style="width:100px;"></el-input> - <el-input style="width:100px;"></el-input>
                    <el-button type="primary" icon="el-icon-search">查询</el-button>
                </el-col>
            </el-row>
        </div>

        <!--排序-->
        <div>
            <el-row>
                <el-col :span="3" :offset="1">&nbsp;</el-col>
                <el-col :span="20">
                    <el-button type="primary" icon="el-icon-edit" @click="eventSort('sale', 'asc')">按销量</el-button>
                    <el-button type="primary" icon="el-icon-search">按价格</el-button>
                </el-col>
            </el-row>
        </div>

        <!--热销商品-->
        <div style="display:none;">

            <el-row>
                <el-col :span="3" :offset="1">热销商品</el-col>
                <el-col :span="20">
                    <div style="text-align:right;">更多 》》》</div>
                    <el-row>
                        <el-col :span="6" v-for="(o, index) in 4" :key="index">
                            <el-card :body-style="{ padding: '0px' }">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                    class="image">
                                <div style="padding: 14px;">
                                    <span>好吃的汉堡</span>
                                    <div class="bottom clearfix">
                                        <time class="time">1313</time>
                                        <el-button type="text" class="button">操作按钮</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>

        <!--商品列表-->
        <div>
            <h3>商品列表</h3>
            <el-row>
                <el-col :span="6" v-for="(o, index) in productData" :key="index">
                    <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                            class="image">
                        <div style="padding: 14px;">
                            <span>{{ o.title }}</span>
                            <div class="bottom clearfix">
                                <time class="time">1313</time>
                                <el-button type="danger" size="mini" class="button" @click="eventAddCar(o)">加入购物车</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <!--分页-->
        <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {

    data() {
        return {
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            paged: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            search: {
                categoryId: '',
                brandId: '',
                sortField: 'price',
                sortValue: true,
                minPrice: 0,
                maxPrice: 0
            },
            brandData: [],
            productData: [],
            categoryData: [],
            categoryChildrenData: []
        };
    },
    mounted() {
        localStorage.setItem('login-userinfo', '0000000-0000-0000-0000-000000000001')
        this.onLoadData()
    },
    methods: {
        //加入购物车
        eventAddCar(row) {
            //先判断是否登录（主要是能拿到用户id） -- 没有登录 就跳转到登录 页面，有登录则记录下一用户id

            let memberid = localStorage.getItem('login-userinfo')
            if (memberid == null) {
                //跳转登录页面
                this.$router.push('/member/login')
            }

            let url = 'http://localhost:5141/car'
            let data = {
                "memberId": memberid,
                "productId": row.id,
                "productNumber": 1,
                "productPrice": row.price,
                "productName": row.title,
                "productImage": row.coverImage,
                "productStoreName": row.storeName
            }
            this.$http.post(url, data).then(res => {
                console.log(res)
            })
        },
        //排序事件
        eventSort(sortField, sortValue) {
            this.search.sortField = sortField
            this.search.sortValue = sortValue == 'asc' ? true : false
            this.onLoadData()
        },
        //二级分类单击事件
        eventCategoryChildrenClick(id) {
            this.search.categoryId = id
            this.onLoadData()
        },
        //一级分类单击事件
        eventCategoryClick(id) {
            console.log(id)
            //在这个事件里，去找到它的二级
            let a = this.categoryData.filter(x => x.id == id)
            //console.log( a[0].items)
            this.categoryChildrenData = a[0].items
        },
        //价格区间单击事件
        eventPriceClick(min, max) {
            this.search.maxPrice = max
            this.search.minPrice = min
            this.onLoadData()
        },
        //品牌单击事件
        eventBrandClick(id) {
            this.search.brandId = id
            this.onLoadData()
            //this.$message.info(name)
        },
        onLoadData() {
            let url = 'http://localhost:5141/product'
            this.$http.get(url, {
                params: {
                    categoryId: this.search.categoryId,
                    brandId: this.search.brandId,
                    sortFiled: this.search.sortField,
                    isDesc: this.search.sortValue,
                    pageIndex: this.paged.pageIndex,
                    pageSize: this.paged.pageSize,
                    minPrice: this.search.minPrice,
                    maxPrice: this.search.maxPrice
                }
            }).then(res => {
                //console.log(res)
                this.productData = res.data.data.productData
                this.brandData = res.data.data.brandData
                this.categoryData = res.data.data.categoryData
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
}
</script>